「デザイン勉強会2nd」とってだしレポート

またやるよー

写真はまとめてここ。略してまめこ←言いたいだけ

091111デザイン勉強会2nd – a set on Flickr
http://www.flickr.com/photos/kai3desu/sets/72157622782419202/

動画は続きにおいておきます。クオリティ重視の人はHDボタン押してくださいませ。

第一部：まめこ

1982年生まれの26歳
栃木県でおしごと
7月にフリーランスデザイナー
今は印刷物、ノベルティ、Webサイトなど
「地域密着型なんでも屋」

ノンデザイナーのためのサイト制作

ソフトはどうすればいい？
やっぱりPhotoshop
でも高い
体験版も放置していたら終わっちゃう
elementなら2万円
本家と操作違うが
本業じゃなければいろいろ実現できるかな
デザイナーさんならもっているので汎用性が高い

Photoshopがあればなんでもできる
howtoはどこにでもある
psd　tuts、PHOTSYOP VIPがオススメ

Photoshop Tutorials – Psdtuts+
http://psd.tutsplus.com/

Photoshop Vip
http://photoshopvip.net/

なんちゃってデザインをしたいときの使えるサイト
案件によっては素材を自分で何とかしなければいけない
素材にお金をかけられない時

stock.xchng – the leading free stock photography site
http://www.sxc.hu/

海外
商用利用許可
人物写真を国内で使うのは難しいが
電話とかコラージュ、空の風景はたいがいここにある

Free Photoshop Brushes at Brusheezy!
http://www.brusheezy.com/

PIXIVが大きくなって海外サイトになったみたいな。
語弊あるかも

Free Vector Art – Download Free Vector Graphics and Vector Art at Vecteezy!
http://www.vecteezy.com/

フォトショップブラシを検索してダウンロード
それを商用利用も可能
コーヒーのしみ、水彩タッチ、光のふわー、ダイヤのきらきら

Free Vector Art – Download Free Vector Graphics and Vector Art at Vecteezy!
http://www.vecteezy.com/

兄弟サイト
ベクターデータがダウンロードできる
ただではない
すごいリアルなイラスト、アイコンに使えそうなマークとか
無料？ではない。ライセンスはある

tumblrに気になるデザインをとっておくといい
Autopagerizeでみやすくて便利
一覧みるのにすぐれている

ただクライアントが厳しいと不安が付きまとうのも事実
本当に商用利用でいいのか

そういうときはCDを買うといい
・具満たん
・素材辞典
「写真素材」で検索するとたくさんヒット

次
配色ツール
色に著作権はない
どんどん盗もう
Kulerに頼ろう
http://kuler.adobe.com/
色を指定してバリエーション出してくれる
いっぱい配色ツールあるけど悩みは尽きない

色多いと大変
まずは2、3色で作ってみる
それが外さないコツ

主役の写真で使われている色で構成する

DeGraeve.com – The Projects of Steven DeGraeve
http://www.degraeve.com/
デザイナーに受け継がれているTIPSでは

Photosopで配色
色相・彩度というツールでバリエーションチェックできる
インジゲータでいろいろできる
まめこブログもこれでデザイン

ボタンについて
だいたい角丸デザイン
ぷっくりしていて押せそう

ポイントはグラデーション
リアルな質感のある
微妙な色調
でもはじめてやろうとする人が彩色するのは難しいしめんどう

photoshop グラデーション
で検索
たくさんサイトがある
気に入ったらサクッとDL

さっそく実演

つくるのめんどい、難しくて不安という人

ボタンダウンロード.com
すぐダウンロードできる
ペパボの中の人が作った
商用利用もOK

button-download.com
http://button-download.com/

こっからレベルを上げよう

ロゴやアイコンだって簡単にできる

まずはアイコン

四角に入れる
先程のレイヤースタイルで質感だすの大事
HOMEに至っては四角で、ログインは○で作った、USERは○に半円をつけてつくった
まずは「図形でかけるものはなんだろう」を考えるといい

キモはレイヤースタイルで質感

最後はロゴ

凝った書体は必要ない
みんなこったの使いたがる
変なふにふにしたやつとか
それは個性が強すぎて負けることも

Helvetica
Century ゴシック
Futura
Georgia
このあたりがおすすめ
ブラウザでも普通に表示
GeorgiaはMacでもキレイ

実演！

最後のラスボス
メインイメージ

今日覚えたことだけでデザイナーっていっちゃおう！

質疑応答
日本語どうすればいい？

カタカナひらがなならいいのがある

マニアッカーズデザイン
http://mks.jp.org/
群馬県にある有名な書体
プロフィルのフォントもここで作った
プロフィルのフォントもここで作った（大事なことなので2回言いました）

言い値で作ってくれる
ネゴる気なし
スマスマやガキ使もここ
フリーも商用利用ならお金は取る

次の質問
漢字はどうすれば？

太い文字でヒラギノ
角を丸く
書体を薄くするためにアウトラインをかけて
パスのオフセットでさらに細さを演出
話が難しいのでブログで書きますね

字詰めの調節どうやってたの？
文字と文字の間にカーするでAltかオプション押しながら→

第二部

司会進行は田口さん

百式というブログやってます
百式飴配ってたのに紹介してもらえなかった

第二部はデザイナーさんとのコミュニケーション
架空の案件に対してパネラーがそれぞれ提案

自己紹介

シラサカさん
ホームページ制作会社で取締役
もともとは紙系、なんでもやる
DTPおかねにならないので最近はWeb系

ハマダさん
Webのデザインやってます
学生の頃から10年くらい
ずーっとWeb
学校の専門はグラフィックデザイン
そのころから独学でも

では架空の案件を紹介

設定は渋谷某所のカフェ
20代、30代に人気
店内はボサノヴァが流れ、ゆったりした気分
参考店舗はambar

自由度高すぎても困るのでレイアウトと最低限のデザインは決める

予算設定は30万円
ロゴ5万円
トップ5万円
下層デザイン10万円
オーサリングなどなどで10万円

シラサカ案

制作の流れ

どんなタイプの案件か
まじめなのかふざけてるのか
まじめだったら白背景、左上のロゴ
勝手に東急電鉄のサイトを使って説明
誰もが安心できるサイト

遊びがある例
実績で紹介
アクが強いので好き嫌いがわかれる

渋谷のカフェだとどっちか
まずイメージしよう

ボサノヴァといえばセルジオ・メンデス

イメージしながら同時進行
ジャズって茶系だよね。木のイメージ

手書き風フォントの小文字でジャズっぽい
見にくいのでグロー効果、ぼかし
単調なので文字サイズ調整

茶に茶なので見にくい
最終調整
ロゴのまわりだけライトアップしている的な

次にヘッダーデザイン
木のぬくもりを消さない
グリッド感
直線をつかわない
手作りのアナログ感を出す
書体もてがきっぽく

ボツ案
日本語いれたらダサい
ユーザビリティ大事だが
おしゃれカフェくるならそれくらい読めるだろJK

メインイメージ
イラスト大変なので写真で
ただ並べてもつまらない、ポラっぽく
サービスで簡単にポラっぽくできる

ここまでいけばたいてい大丈夫

次はコンテンツ部分

その前に田口さんから質問
クライアントと何回会うの？

完成まで3、4回
早くて1カ月、おそくて2カ月
きほんはメールとか
でもお客さんによる
イメージ膨らんで夢見ちゃうタイプだと時間かかる

いやなタイプは？
「おまかせ」とかいっといて最初のデザイン見てイメージわいて
そこでありとあらゆる参考サイト出してきて
提出したものを無視する

そういう客への対応は？
ヒアリングきっちり
最初の打ち合わせで参考サイト
お客の好みをしる
そうするとブレにくい

雑誌とかの趣味を聞く（まめこ）
好きな女の子のタイプとか（シラサカ）

話に戻ってコンテンツ部分
白文字好きじゃない
みにくいよね

背景を切り替えて紙っぽく
フォントは手書き風からブレない
ブラウン中心にしつつオレンジを

マップはグーグルマップいれときゃいいでしょ

最後のフッター
最近はボリュームあるのが人気
SEOもいい
でもごちゃごちゃしたくないから今回はシンプル

使ったもの
Fireworks
Web制作にはほんとにいい
印刷するならありえないがWebなら

あとはGoogle先生でいろいろなサイト見て
パクるのではなくインスパイア
あとはデザインセンス

田口さんから質問
ツールの使い分けは？

シラサカ
写真の加工はPhotoshop
WebのレイアウトはFirworks

ハマダ
使い分け
ロゴはイラストレーター

まめこ
イラストレーターでロゴ、文字
それをPhotoshopで写真と組み合わせる
上ができれば後は流れでいける
あとはFireworksで
一括処理とかが得意

田口
いまの質問はジャブ
お客さんとのトラブルでいやなやつトップ3は？

まめこ
要件を出して修正したのにやっぱり違うのがいいという
言うとおり直したのにそれは無視ですか
それが上位3位

田口
そういうときどうするの？

まめこ
なぜこんな修正がいいのかをもらって一回もむ
なぜそんな修正するのか
それでもだめなら2つ出す

ハマダ
女性のお客さん
これとこれすきだからこれ使ってーと素材の指定

田口：それはだめなの？

ハマダ
最終的なイメージなくてポイントだけ指示されると困る
最終的なイメージを最終的にすり合わせ
使うもの使わないものを調整

田口
結局いろいろお話しないとだめ？

シラサカ
ヒアリングだいじ
ヒアリングだけやっとけ
最初に要求を聞く
でなくても搾り取る
あとから出てくるのはふせぐ

田口
コストかかるよね
それはやっぱり最初に聞くのがいい？

シラサカ
そうですね

会場から
そうやってヒアリングしてくれたらいいが
そうじゃないデザイナーとどんなコミュニケーションすればいいか

田口さん
全員にききたいね

まめこ
なぜ私に頼むのかを聞く
なぜ企業じゃなくて私に頼むのか
「こういうところが気に入って頼んだんだよ」って伝えるといい

シラサカ
まあそういうことだよね

田口さん
聞きたいのは発注側の話だよね（という軌道修正）

シラサカ
なんだかんだヒアリングする方法も会社によってある
参考サイトが大事
メインカラー、サブカラー、アクセントカラーあるが
参考サイトをできるだけ多く聞いている
少なくとも1つ、2つを伝えよう
このサイトのどこが好きなのか
色かフォントか

話戻ってまめこ案

店舗の概要からみんな茶色だとおもってあえてはずして白基調ｗ

着想
まずは写真から
どういうものを用意しておけばというのは
参考サイトプラス商品写真
Webで使っていい写真を渡すのも手
あとは参考サイト

今回はiPhoneでかっこよかったサイト保存しているので
それをピックアップ
いつか作りたいというデザイン
それをフォルダにわけておく

グーグルで「coffee design」などで検索してじっくり見る

まずはロゴ
ロゴ作るのが楽しい

イラストレータでやっている
まずは手書き
mocaって○の要素が多い

CとAは読みにくいとは自分でも思うけど
かわいいじゃん
タグラインもいれているからだいじょうぶ
あったかそうな湯気も

次にサイト
白のキャンバスに置いたらキレイだった
白がいい

たまたま水色の四角を引いたらキレイ
これにしよう
手抜きじゃないよ
運命

タグラインには凝らない、どのページにいるか場所がわかるようにする
メニューは文字を小さく空白を生かす

フッターは地図や住所など
電話や営業時間もロゴに

最後にキャッチコピー
でもそれだけじゃさみしい
写真もいれたいけどシンプルなので入れるの難しい

おされそうな写真を入れてポラ風に
写真もなんでもいいわけじゃない
下に空いたところにリード文でうけとめてバランスをとる

田口さん質問
「いいかんじじゃない？」といって提出したけど
担当者とセンスあわないときは？

いいかんじだよね！、というのはそういうクライアントに通じない
クライアントごとに好きなのがわかる
洋服の感じ
テレビ、しゃべりかた
パーソナル
それでもだめなら後ろでみてもらう
ロボットのように
ハイ、コレヲ、シタデスネ、コノ、ロゴガ、ヨロシイデスカ

ハマダさん

着想

画面みながらだと悩む
先に決めちゃう
キーワードを設定
こだわり、ゆったり、おちついた、とか
珈琲じゃなくコーヒーとか

現地に消えない場合はキーワードから具体的イメージを連想
スタバよりタリーズとか、カップのイメージ、照明とかも想像

ここまで1週間
通勤中にぼんやり考える

まずはロゴ
オーソドックスにしたい

いろいろ並べて書体を選ぶ
お店の名前で人に読んでもらう
どんな音で聞こえそうなのか
お見せに飾られたときにどう見えるか
ちゃんと読めるのか

全部小文字だとやわらかすぎるかな
最後だけ大文字に
フィルタで丸くして歪み修正
ここまでイラストレータ

カラーパレットでベースとなる色
最低3段階とアクセント

素材をそろえる
素材を加工してシズル感
ゆげをだしたりね

ここからフォトショップ
グリッド、レイアウト、装飾、調整の順

色も写真も文字も決めたから後は置いていく
情報のかたまりをきめて整理する

田口さん質問
自分のスキルを高めるためになにをする？

ハマダ
美術館
いろんなものを見る
空間を最近みようとする
パンフレットとか
Webサイトはプロダクトに近い
ボタン押せるならぷっくりとかざらっととか
そういういろいろな空間をみるのがプラスになる

田口さんから最後に2つ
個人的な期待はいいデザイナーと知り合いたい

いいデザイナーの見分け方
どういう質問をすればいいか

なにを褒めたらいいか

まずは見分け方から

シロサカさん
失敗しない感、企業は失敗を恐れるので
あとは説得力
専門用語をならべるとか

まめこ
あっちゃこっちゃ話がいったときに
あわせるのじゃなくて
ちゃんと仕切れる人
話を流してないか、どう作るかを落とし込んでいる人

もう1つはこうありたいこと
クライアントにとってはめんどいかもだけど
言われたとおり修正するだけじゃないデザイナー

ハマダさん
温度感を共有できる人
熱さを共有、一緒にいいものを作れる
クールだったらクールに返せる人

シラサカ
クライアントというよりチームというのは大事
昔は考えていたけど今改めてまた大事だと思った

2つ目
デザイナーとしてほめられてうれしい言葉

シラサカ
「コストパフォーマンスが高い」
大企業並みのものがフリーランスのこの値段で

まめこ
わかるー

ハマダ
「担当以外からも好評です」

まめこ
「サイト気にいったんだけどどのデザイナーさんに頼んだの？」

質問
そもそも色の組み合わせを知りたい

シラサカ
補色
反対の色がいい
それは結構使いやすい
円の反対が合う

まめこ
そういうサイトもあるのであとでフォローします

動的なサイトは？

まめこ
むずかしい
本当は早い段階でAjaxで動きのあるものにかぶせたい

ハマダ
枚数を作る
アニメーション的にパラパラ見られるように
こういうデザインになると見せる

マークアップはいつから意識する？

シラサカ
Webのデザインはどういう感じで組まれるかは頭に入っていないとだめ
誰も知らないデザイナーがコーダーに投げるというのは大変
どういう形でコーディングするか考えている
そういう意味では最初から

まめこ
たまに忘れてあとでうわーってなる

最初に覚えたほうがいいのはどれ？

まめこ
最初に言ったじゃーんｗ
まずはフォトショップ

地図作るけど歩いたりしてるの？

ハマダ
いかないケースが多い
ざっくりかいたりすでにあるものを

まめこ
Google マップからトレース

デザイン発注するとき、あがってきたのが趣味と違って絶望するんだけど
どうやったら傷つけずにつたえられるか

まめこ
傷つけられなれているので
「ないわー」でいいｗ

ハマダ
素直に伝えられるのがいい
言葉選ぶのも必要かもだけど
オブラートに包みすぎて伝わらないのが困る

「文字ピクセルまで指定されるとムカつかない？

ハマダ
意図がわかればいい

イベント終了。あとは懇親会ー。
写真はあとで追加しますよ。